<!--邀请界面-->
<template>
	<view>
		<view class="fxinfobox mb20">
			<view class="f28 mb30">
				{{$t("fx.n1.txt1")}}
			</view>
			<view class="bj_between mb20">
				<view class="fxinfobox-inp">
					{{user.inviteUrl}}
				</view>
				<view class="fxinfobox-btn" @click="seturl">
					{{$t("fx.n1.txt2")}}
				</view>
			</view>
			<view class="f28 mb30">
				{{$t("fx.n1.txt3")}}
			</view>
			<view class="bj_between">
				<view class="fxinfobox-icobox tc" v-for="(item , i) in list" @click="tokf(item)">
					<image :src="'/static/fx/'+(i+1)+'.png'"></image>
					<view class="f20">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>

		<view class="fxinfobox mb30">
			<view class="tc f26 mb30">
				{{$t("fx.n1.txt4")}}
			</view>
			<view class="por">
				<image src="/static/fx/fa.png" class="w100" mode="widthFix"></image>
				<view class="poa w100 f24 bj_around" style="left: 0;top: 192rpx;">
					<view class="">
						{{$t("fx.n1.txt5")}}
					</view>
					<view class="">
						{{$t("fx.n1.txt6")}}
					</view>
				</view>
			</view>
		</view>
		<view class="mb30 f30">
			{{$t("fx.n1.txt7")}}
		</view>
		<view class="fxtxtitem bj_between mb20" v-for="i in 3">
			<view class="fxtxtitem-tit bj_center">
				{{$t("fx.n1.lt" + i)}}
			</view>
			<view class="fxtxtitem-txt bj_sx">
				<view v-for="j in 2">
					{{$t("fx.n1.lt" + i+".t"+j)}}
				</view>
			</view>
		</view>
		<view class="f30 fwb mb20">
			{{$t("fx.n1.txt8")}}
		</view>
		<view class="c9c f22 mb10">
			{{$t("fx.n1.txt9")}}
		</view>
		<view class="c9c f22 mb10">
			{{$t("fx.n1.txt10")}}
		</view>
		<view class="c9c f22 mb10">
			{{$t("fx.n1.txt11")}}
		</view>
		<view class="c9c f22 mb10">
			{{$t("fx.n1.txt12")}}
		</view>

		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow
	} from "@dcloudio/uni-app"
	import common from '../../js/common';
	let loading = ref(false)
	let list = ref([{
			name: "Facebook",
			url: getApp().globalData.config2.facebook_url
		},
		{
			name: "WhatsApp",
			url: getApp().globalData.config2.wechat_url
		},
		{
			name: "Telegram",
			url: getApp().globalData.config2.telegram_url
		},
		{
			name: "Instagram",
			url: getApp().globalData.config2.ins_url
		},
		{
			name: "Twitter",
			url: getApp().globalData.config2.twitter_url
		},
		{
			name: "Kwai"
		},
	])

	function tokf(item) {
		window.open(item.url)
	}

	let user = ref({})
	onShow(function() {
		winit()
	})

	function winit() {
		loading.value = true
		common.getMinLoginUser({}, {
			"token": getApp().globalData.userInfo.token
		}).then(res => {
			getApp().globalData.userInfo.user = res.data.user
			user.value = res.data.user
			loading.value = false
		})

	}

	function seturl() {
		uni.setClipboardData({
			data: user.value.inviteUrl,
			success: () => {
				uni.showToast({
					title: 'Sucesso'
				});
			},
			fail: () => {
				uni.showToast({
					title: 'Falha',
					icon: 'none'
				});
			}
		});
	}
</script>

<style scoped lang="scss">
	.fxinfobox {
		background: #00561D;
		border-radius: 20rpx;
		padding: 24rpx 20rpx;

		&-inp {
			width: 520rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #003311;
			border-radius: 12rpx;
			border: 2rpx solid #003311;
			padding: 0 24rpx;
			font-size: 24rpx;
			color: #9C9FB2;
		}

		&-btn {
			width: 124rpx;
			height: 76rpx;
			line-height: 76rpx;
			background: #FFBE32;
			text-align: center;
			border-radius: 12rpx;
			font-size: 28rpx;
		}

		&-icobox {
			width: 106rpx;
			color: #A2B5D5;

			image {
				width: 80rpx;
				height: 80rpx;
			}
		}
	}

	.fxtxtitem {
		border-radius: 12rpx;
		background: #00561D;
		height: 156rpx;

		&-tit {
			width: 140rpx;
			height: 156rpx;
			background: #098B34;
			border-radius: 12rpx 0rpx 0rpx 12rpx;
			font-size: 30rpx;
			font-weight: bold;
		}

		&-txt {
			width: 570rpx;
			height: 156rpx;
			padding: 0 16rpx;
			font-size: 24rpx;
			color: #9C9FB2;
		}
	}
</style>